<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>插件市场 – 基于Ruoyi-Plus后台开发框架</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="author" content="Ruoyi-Plus">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/front/H-ui/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/front/H-ui/lib/respond.min.js"></script>
    <link href="/front/H-ui/static/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/front/H-ui/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/front/H-ui/static/h-ui/css/H-ui.doc.css"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/swiper/css/swiper.css}"/>
    <link rel="stylesheet" type="text/css" href="/front/H-ui/lib/Hui-iconfont/1.0.8/iconfont.min.css"/>
    <link th:href="@{/ajax/libs/toastr/toastr.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>

</head>
<body class=" ">

<div th:replace="front/header"></div>


<main class="content">
    <style>
        .wait {
            border: 1px solid #d2d6de;
            padding: 0px 16px;
            font-size: 15px;
            color: #999;
            height: 44px;
        }

        main.content {
            margin: 0;
            padding: 0;
            min-height: calc(100vh - 355px);
        }

        #content-container {
            min-height: 250px;
            padding: 15px;
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 30px;
        }

        @media (min-width: 1200px) {
            #content-container {
                width: 1170px;
            }
        }

        @media (min-width: 992px) {
            #content-container {
                width: 970px;
            }
        }

        @media (min-width: 768px) {
            #content-container {
                width: 750px;
            }
        }

        #content-container {
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        .login-section {
            margin: 110px auto;
            width: 460px;
            -webkit-border-radius: 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 0;
            -moz-background-clip: padding;
            border-radius: 0;
            background-clip: padding-box;
        }

        .user-section {
            background: #fff;
            padding: 15px;
            margin-bottom: 20px;
            -webkit-border-radius: 4px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 4px;
            -moz-background-clip: padding;
            border-radius: 4px;
            background-clip: padding-box;
            -webkit-box-shadow: 0 26px 50px -20px rgba(0, 36, 100, 0.3);
            -moz-box-shadow: 0 26px 50px -20px rgba(0, 36, 100, 0.3);
            box-shadow: 0 26px 50px -20px rgba(0, 36, 100, 0.3);
        }

        .login-section .logon-tab {
            margin: -15px -15px 0 -15px;
        }

        .login-section .logon-tab > a.active {
            background-color: #fff;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        .login-section .logon-tab > a {
            display: block;
            padding: 20px 0px;
            float: left;
            width: 50%;
            font-size: 16px;
            text-align: center;
            color: #616161;
            background-color: #fafafa;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        .login-section .login-main {
            padding: 12px 30px 20px 30px;
        }

        a:hover, a:focus {
            text-decoration: none;
        }

        a.btn-primary {
            color: #fff;
            background-color: #2c3e50;
            border-color: #2c3e50;
        }

        a.btn-primary:hover {
            color: #fff;
            background-color: #1a242f;
            border-color: #161f29;
        }
    </style>
    <div id="content-container">
        <div class="user-section login-section">
            <div class="logon-tab clearfix">
                <a class="active">登 录</a>
                <a href="/register">注册</a>
            </div>
            <div class="login-main">
                <form class="form form-horizontal responsive" id="login_form">
                    <div class="row clearfix">
                        <label class="form-label col-xs-3">用户名：</label>
                        <div class="formControls col-xs-8">
                            <input type="text" class="input-text" name="username" id="username">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-3">密码：</label>
                        <div class="formControls col-xs-8">
                            <input type="password" class="input-text" autocomplete="off" name="password" id="password">
                        </div>
                    </div>

                    <div class="row clearfix">
                        <div class="formControls col-xs-8 col-xs-offset-3" style="font-size: 12px">
                            <input type="checkbox" name="rememberMe" checked="checked" value="1"> 记住我
                            <div class="pull-right"><a href="/resetpwd" style="color:#3c8dbc" class="btn-forgot">忘记密码?</a></div>
                        </div>
                    </div>

                    <div class="row clearfix ">
                        <div class="formControls col-xs-8 col-xs-offset-3">
                            <a onclick="login()" class="btn btn-primary btn-md btn-block">登 录</a>
                        </div>
                    </div>
                </form>

                <!--<div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <a href="#" class="btn btn-block btn-default mb-1">
                            <i class="fa fa-qq text-blue"></i> 使用腾讯QQ登录
                        </a>
                    </div>
                </div>-->

                <div class="row clearfix mt-15">
                    <div class="formControls col-xs-8 col-xs-offset-3">
                        <a href="/login/third?t=qq&url="
                           class="btn btn-block btn-default mb-1">
                            <i class="fa fa-qq" style="color:#5a98de;"></i> 使用腾讯QQ登录
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>


<div th:replace="front/footer"></div>

<script type="text/javascript" src="/front/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/front/H-ui/lib/jquery-ui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/front/H-ui/static/h-ui/js/H-ui.js"></script>

<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.1.0}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>
<script th:src="@{/ajax/libs/toastr/toastr.min.js}"></script>
<script th:src="@{/ajax/libs/swiper/js/swiper.js}"></script>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    $(function () {

        $("#login_form").validate({
            focusCleanup: true,
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: "请输入用户名",
                },
                password: {
                    required: "请输入密码",
                }
            }
        })

    })

    function login() {
        if ($.validate.form()) {
            var username = $("#username").val();
            var password = $("#password").val();
            var rememberMe = $("input[name='rememberMe']").is(':checked');

            $.ajax({
                type: "post",
                url: ctx + "login",
                xhrFields: {
                    withCredentials: true
                },
                data: {
                    "username": username,
                    "password": password,
                    "rememberMe": rememberMe
                },
                success: function (r) {

                    if (r.code == 0) {
                        location.href = ctx + 'user/index.html';
                    } else {
                        $.modal.closeLoading();
                        $.modal.msg(r.msg);
                    }
                }
            });

        }
    }

</script>
<script>
    /*加载底部前执行。ps：防止闪现
     控制当页面内容过少时，底部仍在屏幕最下方
     主体内容最小高度
     */
    var topHeight = 46;//头部高度

    var footerHeight = 171;//底部高度
    var contentMinHeight = $(window).height() - topHeight - footerHeight;
    $("#content-container").css("min-height", contentMinHeight)
    $(window).resize(function () {
        var contentMinHeight = $(window).height() - topHeight - footerHeight;
        $("#content-container").css("min-height", contentMinHeight)
    })
</script>
</body>

</html>